import { createElementVNode } from 'vue';

// 默认的组件实现
export default {
  // 定义组件的属性
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  // 组件的 setup 函数
  setup(_: { title: string }, {slots}: { slots: any }): (() => any) {
    // 获取插槽内容
    const defaultNodes = (slots.default && slots.default()) || [];
    const bodyNodes = (slots.body && slots.body({ params: '参数一' })) || [];
    const headerNodes = (slots.header && slots.header()) || [];
    const footNodes = (slots.footer && slots.footer()) || [];

    // 返回的函数相当于 render 函数
    return () => {
      // 使用 Vue 的虚拟节点 API 创建组件的 DOM 结构
      return createElementVNode('div', null, [
        ...defaultNodes,
        ...headerNodes,
        ...bodyNodes,
        ...footNodes
      ]);
    };
  }
};